<script setup lang='ts'>

import NumberTool from '../../components/NumberTool.vue'
</script>

<template>
<view class="form">
  <view class="form-item">
    <span class="label">是否开启</span>
    <switch color="#FF4638"/>
  </view>
  <view class="form-item">
    <span class="label">活动有效期</span>
    <view class="arrow">
      <span>选择时间</span>
      <image src="/static/image/form/right_arrow.png" mode="widthFix" />
    </view>
  </view>
</view>
  <view class="list">
    <view class="list-item">
      <h3>谢谢回顾</h3>
      <p>概率设置</p>
      <NumberTool color="#C47200"/>
    </view>
    <view class="list-item">
      <h3>小积分</h3>
      <p>分数设置</p>
      <NumberTool color="#D46266"/>
      <p>概率设置</p>
      <NumberTool color="#D46266"/>
    </view>
    <view class="list-item">
      <h3>大积分</h3>
      <p>分数设置</p>
      <NumberTool color="#947503"/>
      <p>概率设置</p>
      <NumberTool color="#947503"/>
    </view>
    <view class="list-item">
      <h3>优惠券</h3>
      <view class="select">

      </view>
      <p>概率设置</p>
      <NumberTool color="#C47200"/>
    </view>
    <view class="list-item">
      <h3>优惠券</h3>
      <view class="select">

      </view>
      <p>概率设置</p>
      <NumberTool color="#C47200"/>
    </view>
    <view class="list-item">
      <h3>优惠券</h3>
      <view class="select">

      </view>
      <p>概率设置</p>
      <NumberTool color="#947503"/>
    </view>
  </view>
  <view class="action">
    <button class="btn large primary">保存设置</button>
  </view>
</template>

<style scoped lang='scss'>
.list {
  display: flex;
  flex-wrap: wrap;
  row-gap: 32rpx;
  column-gap: 16rpx;
  justify-content: center;
  margin-top: 32rpx;
  .list-item {
    width: 218rpx;
    height: 264rpx;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius: 16rpx 16rpx 16rpx 16rpx;
    h3 {
      font-size: 28rpx;
      margin-bottom: 8rpx;
    }
    p {
      font-size: 20rpx;
      letter-spacing: 2px;
      margin-bottom: 8rpx;
    }
    &:nth-child(3n-2) {
      background: linear-gradient( 180deg, #FFF4DA 0%, #FFE2BB 100%);
      color: #C47200;
    }
    &:nth-child(3n-1) {
      background: linear-gradient( 180deg, #F8E4E5 0%, #FFCBCE 100%);
      color: #D46266;
    }
    &:nth-child(3n-3) {
      color: #947503;
      background: linear-gradient( 136deg, #FFF59E 0%, #FFD254 100%);
    }
  }
}
.action {
  width: 90%;
  margin: 80rpx auto;
  .btn {
    width: 100%;
  }
}
</style>